import { createAlova } from 'alova'
import VueHook from 'alova/vue'
import GlobalFetch from 'alova/GlobalFetch'
import toast from './toast'
// import { ElMessage } from 'element-plus'

export const handleNetworkError = (errStatus: number) => {
  if (errStatus == 200) return
  let errMessage = '未知错误'
  if (errStatus) {
    switch (errStatus) {
      case 400:
        errMessage = '错误的请求'
        break
      case 401:
        errMessage = '未授权，请重新登录'
        break
      case 403:
        errMessage = '拒绝访问'
        break
      case 404:
        errMessage = '请求错误,未找到该资源'
        break
      case 405:
        errMessage = '请求方法未允许'
        break
      case 408:
        errMessage = '请求超时'
        break
      case 500:
        errMessage = '服务器端出错'
        break
      case 501:
        errMessage = '网络未实现'
        break
      case 502:
        errMessage = '网络错误'
        break
      case 503:
        errMessage = '服务不可用'
        break
      case 504:
        errMessage = '网络超时'
        break
      case 505:
        errMessage = 'http版本不支持该请求'
        break
      default:
        errMessage = `其他连接错误 --${errStatus}`
    }
  } else {
    errMessage = `无法连接到服务器！`
  }
  return errMessage
}

// 创建实例
const alovaInstance = createAlova({
  baseURL: '',
  // （必须）它用于确定在 use hook（例如 useRequest）应该如何返回状态化数据，
  // 目前提供了 VueHook、ReactHook、SvelteHook 分别用于支持 vue、react 和 svelte，
  // statesHook 将会帮我们创建不同 UI 框架的请求相关的、可以被 Alova 管理的状态，包括请求状态 loading、响应数据 data、请求错误对象 error 等；
  statesHook: VueHook,
  // （必须）请求适配器，请求适配器将用于所有请求的发送，
  // 请求发送模块和具体的请求信息是解耦的。在示例代码中使用了默认提供的 GlobalFetch，它由window.fetch提供请求支持。
  requestAdapter: GlobalFetch(),

  // 请求拦截器
  // 函数参数为一个method实例，包含如url、params、data、headers等请求数据
  beforeRequest(method) {
    method.config.headers['Content-Type'] = 'application/json'
    method.config.credentials = 'include',
    method.config.headers['Authorization'] = "Bearer " + localStorage.getItem('token')
    method.config.headers['token'] = localStorage.getItem('token')
  },

  // 请求成功的拦截器
  // 当使用GlobalFetch请求适配器时，第一个参数接收Response对象
  // 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
  responded:  {
    onSuccess: async (response, method) => {
      const errMessage = handleNetworkError(response.status)
      if (errMessage) {
        // ElMessage({ showClose: true, message: errMessage, type: 'error', })
        console.error(errMessage)
        return null
      }
      const json = await response.json()
      // 业务code
      if (json.code !== 200) {
        // alert(json.msg)
        // ElMessage({ showClose: true, message: json.msg, type: 'error', })
        toast.add({ severity: 'error', summary: json.msg, life: 3000 });
        return null
      }
      return json.data
    },
    // 请求失败的拦截器
    // 请求错误时将会进入该拦截器。
    // 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
    onError: (err, method) => {
      // ElMessage({ showClose: true, message: err.message, type: 'error', })
      // console.error(err.message)
      toast.add({ severity: 'error', summary: err.message, life: 3000 });

    }
  }
})

export {
  alovaInstance
}

